<template>
    <div class="LivevideoRoom">
        <Head></Head>
        <div class="LivevideoRoom-con">
            <div class="LivevideoRoom-content">
                <div class="LivevideoRoom-head">
                    <div class="head-left">
                        <label>{{group_name}}</label>
                        <label>
                            <span>{{groupinfo.language}}</span>
                            <span>{{groupinfo.map.userinfo.nick_name}}老师</span>
                        </label>
                    </div>
                    <div class="head-right">
                        <label>
                            <span>正在回放</span>
                        </label>
                        <label class="oicebroadcast-info-right">
                            <span  @click="Exitto">退出播放</span>
                        </label>
                    </div>
                </div>
                <div>
                    <div class="LivevideoRoom-left">
                        <video-player class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            :playsinline="true"
                            :options="playerOptions">
                        </video-player>
                    </div>
                    <div class="LivevideoRoom-right">
                        
                        <div class="LivevideoRoom-right-head">
                            <ul>
                                <li>录播课程({{LiveplaybackList.length}})</li>
                            </ul>
                            <div class="LivevideoRoom-right-head-lsit">
                                <ul class="videolis">
                                    <li v-for="(videoitem,videoindex) in LiveplaybackList" 
                                    :key="videoindex"
                                    :class="viderindexs == videoindex ?'videoseled':''"
                                    @click="Videoplayer(videoindex,videoitem)"
                                    >
                                        <label>
                                            <img :src="videoitem.map.appointmentinfo.cover" alt="">                                        
                                        </label>
                                        <label>
                                            <span>{{videoitem.map.appointmentinfo.title}}</span>
                                            <span style=" display:inline-block;width:100%">{{groupinfo.language}}</span>
                                            <span class="timers">{{videoitem.timers}}</span>
                                        </label>
                                    </li>
                                </ul>
                                <div class="load-more mr-bottom" v-if="pages>10"  @click='loadMore' >点击加载更多</div>
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
                
            </div>
            
        </div>
        
        <Footer></Footer>
    </div>
</template>
<script>
import TIM from 'tim-js-sdk';
let options = {
  SDKAppID: 1400255047 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
import Head from '../../components/LiverHead'
import {TimLogin} from '../../components/Tim'
import Footer from '../../components/footer'
import $ from 'jquery';
import Modal  from '../Voicebroadcast/Dialog'
export default {
    name:'LivevideoRoom',
    data(){
        return{
            groupinfo:'',//上一个页面传来的房间信
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            playerOptions:[],
            LiveplaybackList:[],
            viderindexs:0,
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            currentPage:1,
            pages:10,
            istrue:this.$route.query.istrue
        }
    },
    mounted(){
        var _this = this
        _this.groupinfo = JSON.parse(_this.$route.query.item);
        if(_this.istrue){
            _this.group_id = _this.groupinfo.map.appointmentinfo.group_id
            _this.group_name = _this.groupinfo.map.appointmentinfo.title
        }else{
            _this.group_name = _this.groupinfo.map.groupinfo.group_name
            _this.group_id = _this.groupinfo.map.groupinfo.id
        }
        
        console.log(_this.groupinfo,'直播间信息')
        _this.GetVideo()
    },  
    methods:{
        GetVideo(){
            var _this = this
            var data ={
                group_id:_this.group_id,
                pageSize:_this.pages,  
                currentPage:_this.currentPage       
            }
            _this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/message/groupRecording/queryListPage',
                params:data,
            }).then((res)=>{
                _this.LiveplaybackList = res.data.data
                _this.LiveplaybackList.forEach(e=>{
                    _this.Videoplayer(0,_this.LiveplaybackList[0])
                    var audioElement = new Audio(e.record_url);
                    audioElement.addEventListener("loadedmetadata", function() {
                        var duration = audioElement.duration; // 视频时长
                        var day = Math.floor(duration / (24 * 3600));
                        var hour = Math.floor((duration - day * 24 * 3600) / 3600);
                        var minute = Math.floor((duration - day * 24 * 3600 - hour * 3600) / 60);
                        var second = Math.floor(duration - day * 24 * 3600 - hour * 3600 - minute * 60);
                        if (hour) {
                            var timers = hour + ":" + minute + ":" + second;
                        } else {
                            if (second < 10) {
                                if(second ==0){
                                    if(minute ==0){
                                        var timers =  "00:00" ;
                                    }else{
                                       var timers=  minute + ":" + second+'0'; 
                                    } 
                                }else{
                                    if (minute < 10) {
                                        return "0" + minute + ":" + second + "0";
                                    } else{
                                        var timers =  minute + ":" + second + "0";
                                    }
                                }
                            } else {
                                var timers = minute + ":" + second;
                            }
                        }
                        e.timers = timers
                        _this.Thetheme.forEach(is=>{
                            if(is[e.map.appointmentinfo['title']]){
                                e.map.appointmentinfo['title'] = is[e.map.appointmentinfo['title']]
                            }
                        })
                    })
                })
                console.log(_this.LiveplaybackList)
            }).catch((err)=>{
                console.log(err)
            })
        },
        Videoplayer(index,e){
            this.viderindexs = index
            let arrs = {
                playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
                autoplay: true,  //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto',   // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9',// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: false,// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4",//类型
                    src: e.record_url //url地址
                }],
                poster: e.map.appointmentinfo.cover, //你的封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试',//允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: true,
                    fullscreenToggle: true //全屏按钮 
                }
            }
            this.playerOptions = arrs
        },
        Exitto(){
            this.$router.go(-1)
        },
        loadMore(){
            var _this = this 
            _this.currentPage +=1
            _this.pages +=10
            var data ={
                group_id:_this.group_id,
                pageSize:_this.pages,  
                currentPage:_this.currentPage       
            }
            _this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/message/groupRecording/queryListPage',
                params:data,
                }).then((res) =>{
                    _this.LiveplaybackList = _this.LiveplaybackList.concat(res.data.data)
                    console.log(_this.LiveplaybackList)
                    _this.LiveplaybackList.forEach(e=>{
                    var audioElement = new Audio(e.record_url);
                    audioElement.addEventListener("loadedmetadata", function() {
                        var duration = audioElement.duration; // 视频时长
                        var day = Math.floor(duration / (24 * 3600));
                        var hour = Math.floor((duration - day * 24 * 3600) / 3600);
                        var minute = Math.floor((duration - day * 24 * 3600 - hour * 3600) / 60);
                        var second = Math.floor(duration - day * 24 * 3600 - hour * 3600 - minute * 60);
                        if (hour) {
                            var timers = hour + ":" + minute + ":" + second;
                        } else {
                            if (second < 10) {
                                if(second ==0){
                                    if(minute ==0){
                                        var timers =  "00:00" ;
                                    }else{
                                       var timers=  minute + ":" + second+'0'; 
                                    } 
                                }else{
                                    if (minute < 10) {
                                        return "0" + minute + ":" + second + "0";
                                    } else{
                                        var timers =  minute + ":" + second + "0";
                                    }
                                }
                            } else {
                                var timers = minute + ":" + second;
                            }
                        }
                        e.timers = timers
                        _this.Thetheme.forEach(is=>{
                            if(is[e.map.appointmentinfo['title']]){
                                e.map.appointmentinfo['title'] = is[e.map.appointmentinfo['title']]
                            }
                        })
                    })
                })
                }).catch((error) =>{
                    console.log(error)
            })
        },
    },  
    components: {//组件注册
        Footer,
        Head,
        Modal
    },
}
</script>
<style lang="less" scoped>
    .LivevideoRoom{
        width: 100%;
        height: auto;
    }
    .LivevideoRoom-con{
        position: relative;
        min-width: 1400px;
        width: 100%;
        background:rgba(241,241,241,1);
        height: 1000px;
        padding-top: 60px;
    }
    .LivevideoRoom-content{
        position: relative;
        width: 1400px;
        height: 750px;
        margin: 0 auto;
        background:rgba(43,53,71,1);
        border-radius:15px;
        margin-bottom: 200px;
    }
    .LivevideoRoom-content>div{
        position: relative;
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .LivevideoRoom-head{
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;
    }
    .head-left{
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        label{
            width: 100%;
            &:first-child{
                color: #29E1E2;
                font-weight: bold;
                font-size: 24px;
            }
            &:last-child{
                color: #C4CEE1;
                font-size: 16px;
                span{
                    display: inline-block;
                    margin-left: 20px;
                    &:first-child{
                        margin-left: 0;
                    }
                }
            }
        }
    }
    .head-right{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        label{
            width: 30%;
            text-align: right   ;
            span{
                color: #BDC8DB;
                font-size: 16px;
            }
            &:first-child{
                span{
                    color: #BDC8DB;
                    font-size: 18px;
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;
                    // padding-left: 4%;
                    background-image: url('/images/圆角矩形 30@2x.png');
                    background-repeat: no-repeat;
                    background-size: 27px 30px;
                    width: 100%;
                    background-position-x: 50%;
                 }
            }
            &:last-child{
                span{
                    display: inline-block;
                    width: 144px;
                    height: 40px;
                    border:1px solid rgba(71,206,207,1);
                    border-radius:20px;
                    text-align: center;
                    line-height: 40px;
                    color: #29E1E2;
                    font-size: 14px!important;
                    cursor: pointer;
                }
            }
        }
    }
    .LivevideoRoom-left{
        width: 1000px;
        height: 620px;
        margin-top: 30px;
    }
    .video-player{
        width: 100%;
        height: 100%;
    }
    //直播间样式
    .LivevideoRoom-right{
        width: 333px;
        height: 613px;
        margin-left: auto;
    }
    .oicebroadcast-info-right{
         span{
           display: inline-block;
           display: inline-block;
            width: 30%;
            height: 40px;
            line-height: 40px;
            border:1px solid rgba(71,206,207,1);
            border-radius: 20px;
            text-align: center;
            cursor: pointer;
            color: #29E1E2;
            font-size: 14px;
            background-image: url('/images/组 14@2x.png');
            background-repeat: no-repeat;
            background-position-x: 90%;
            background-position-y: 50%;
            background-size: 19px 17px;
        }   
    }
    .LivevideoRoom-right-head{
        position: relative;
        width: 100%;
        background:rgba(31,39,55,1);
        margin-top: 30px;
    }
    .LivevideoRoom-right-head>ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        width: 100%;
        height: 36px;
        background:rgba(46,65,97,1);
        align-items: center;
        justify-content: center;
        li{
            width: 33.3%;
            color: #FFFFFF;
            font-size: 12px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
        }
    }
    .LivevideoRoom-right-head-lsit{
        position: relative;
        width: 100%;
        height: 526px;
        margin: 0 auto;
        overflow: auto;
    }
    //待麦样式
    .videolis{
        display: flex;
        width: 90%;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: 10px;
        li{
            width: 100%;
            margin-top: 10px;
            cursor: pointer;
            display: flex;
            &:first-child{
                margin-top: 0;
            }
        }
        img{
            width: 100px;
        }
    }
    .videolis>li:hover,.videoseled{
        span{
            color: #29E1E2!important;
        }
    }
    .videolis>li>label:first-child{
        width: 40%;
        cursor: pointer;
    }
    .videolis>li>label:last-child{
        width: 60%;
        cursor: pointer;
        span{
            color: #ffffff;
            margin-top: 10px;
            
        }
    }
    .videolis>li>label:last-child>span:first-child{
        font-size: 16px;
        font-weight: bold;
    }
    .timers{
        display: inline-block;
        width: 100%;
        margin-top: 10px;
    }
    .load-more{
        position: relative;
        width: 40%;
        height: 40px;
        margin: 0 auto;
        cursor: pointer;
        color: #ffffff;
        border: 1px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        margin-top: 20px;
    }
</style>